vue 百度地图实现标记多个maker,并点击任意一个maker弹出对应的提示框信息, (附: 通过多个地址,标记多个marker 的 方法思路) | 您所在的位置:网站首页 › 百度地图 多个地点标记 › vue 百度地图实现标记多个maker,并点击任意一个maker弹出对应的提示框信息, (附: 通过多个地址,标记多个marker 的 方法思路) |
通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个maker,点击任意一个maker,会弹出infoWindow 信息窗口; 说明: 因每个人写法不同、需求不同, 部分代码 未提供 复制粘贴 需要 参考: 百度地图API 1、初始化地图 this.baiduMap = new BMap.Map("allMap",{minZoom:10,maxZoom:20}); // 创建地图实例 this.baiduMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 this.baiduMap.addControl(new BMap.NavigationControl()); this.baiduMap.addControl(new BMap.ScaleControl()); this.baiduMap.addControl(new BMap.OverviewMapControl()); var point = new BMap.Point(117.183, 39.15); // 创建点坐标 this.baiduMap.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别
2、将获取回来的 经纬度数组 arrList 全部标记marker 在地图上; 注意!!!: 如果获取回来的是一个 ” 地址 “ 数组, 需要将地址数组 arrList 批量转换为经纬度, 批量地址转换成 ip 经纬度的方法: 百度地图API: http://lbsyun.baidu.com/jsdemo.htm#i7_3; 通过 geocodeSearch 中 getPoint 生成的 ip 经纬度 地址 用 数组 存起来 , 然后 在进行 后面的操作;
3、在地图上标记完 maker 以后, 并实现点击maker 弹出提示窗口; 要随时注意 addOverlay 与 clearOverlays;
|
CopyRight 2018-2019 实验室设备网 版权所有 |